<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SMT</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/esl.js"></script>
</head>
<body style="padding:0px;margin:0px;">
<div id="top">
	<select>
		<option value=SMT>SMT</option>
	</select>
</div>
<div id="main" style="height: 900px;"></div>
<script type="text/javascript">
	//屏幕大小改变自动刷新
	 $(window).resize(function (){
		window.location.reload();
	}); 

</script>
<script type="text/javascript">
    //路径配置
    require.config({
        paths: {
            'echarts': 'js/echarts',
            'echarts/chart/map': 'js/echarts-map'
        }
    });

    //使用
    require(
        [
            'echarts',
            'echarts/chart/map' //按需加载
        ],

        function (ec) {
            require('echarts/util/mapData/params').params.demo1 = {
                getGeoJson: function (callback) {
                    $.ajax({
                        url: "svg/13.svg",
                        dataType: 'xml',
                        success: function (xml) {
                            callback(xml)
                        }
                    });
                },
            }
            
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'),null,'svg');
            
            //自适应
         	/* window.onresize = function(){
                myChart.resize();
         	}; */
         	
			
            //配置项
            var option = {
                backgroundColor:'',
                title : {
                    text : '产线设备监控',
                    textStyle: {
                        color: '#009900',
                    }
                },
                tooltip : {
                    trigger: 'item',
                    borderRadius: 5,
                    
                    //0表示IDEL,1表示运行，2表示告警，3表示错误停机
                    formatter: function (obj) {
                        if(obj[2] == 0)
                            return obj[1]+'</br>IDEL</br>'+new Date().toLocaleTimeString();
                        if(obj[2] == 1)
                            return obj[1]+'</br>运行</br>'+new Date().toLocaleTimeString();
                        if(obj[2] == 2)
                            return obj[1]+'</br>告警</br>'+new Date().toLocaleTimeString();
                        if(obj[2] == 3)
                        	return obj[1]+'</br>停机</br>'+new Date().toLocaleTimeString();
                    }
                },
                color: ['#000066'],
                legend: {
                    data: ['SMT产线'],
                    textStyle: {
                        color: '#009900'
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                    	//restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                	{
                		//name: 'IDEL'
                        type: 'map',
                        mapType: 'demo1',
                        roam:true,
                        data: [],
                        markPoint: {
                            symbol: 'emptyCircle',
                            effect: {
                                show: true,
                                color: '#eee'
                            },
                            data: []
                        }
                    },
                    {
                		//name: '运行'
                        type: 'map',
                        mapType: 'demo1',
                        roam:true,
                        data: [],
                        markPoint: {
                            symbol: 'emptyCircle',
                            effect: {
                                show: true,
                                color: 'green'
                            },
                            data: []
                        }
                    },
                    {
                		//name: '报警'
                        type: 'map',
                        mapType: 'demo1',
                        roam:true,
                        data: [],
                        markPoint: {
                            symbol: 'emptyCircle',
                            effect: {
                                show: true,
                                color: 'yellow'
                            },
                            data: []
                        }
                    },
                    {
                		//name: '故障'
                        type: 'map',
                        mapType: 'demo1',
                        roam:true,
                        data: [],
                        markPoint: {
                            symbol: 'emptyCircle',
                            effect: {
                                show: true,
                                color: '#FF0000'
                            },
                            data: []
                        }
                    },  
                    {
                        name: 'SMT产线',
                        type: 'map',
                        mapType: 'demo1',
                        roam:true,
                        itemStyle:{
                            //normal:{label:{show:true}},
                            //emphasis:{label:{show:true}}
                        },
                        tooltip : {
                        	show: false,
                        	trigger: 'item',
                            borderRadius: 5,
                            formatter: '{a}'+'</br>'+'{b}',
                        	
                        },
                        data: [],
                        geoCoord: {
                            'BOX_LNB_DTV_L-Band_2#': [100, 540],
                            'BOX_LNB_HWAS_GPADC_Test_02#': [160, 450],
                            'BOX_LNB_HWAS_GPADC_Test_03#': [220, 540],
                            'BOX_LNB_HWAS_GPADC_Test_04#': [280, 540],
                            'BOX_LNB_HWAS_MOCA_Test_01#': [340, 450],
                            'BOX_LNB_DTV_L-Band_3#': [400, 540],
                            'BOX_LNB_HWAS_MOCA_Test_02#': [460, 540],
                            'BOX_74IFPCBA_Testing_Path_2#': [520, 450],
                            'BOX_74IFPCBA_Testing_Path_1#': [570, 540],
                            'BOX_LNB_DTV_L-Band_5#': [630, 450],
                            'BOX_74IFPCBA_Testing_Voltage_1#': [680, 540],
                            'BOX_LNB_3S_CSSATS_LBAND_1#': [740, 450],
                            'BOX_LNB_DTV_L-Band_1#': [800, 540],
                            'BOX_LNB_DTV_L-Band_7#': [850, 540],
                            'BOX_LNB_HEAS_GPADC_Test_03#': [890, 540],
                            'BOX_LNB_HEAS_MOCA_Test_01#': [930, 540],
                            'BOX_LNB_HEAS_GPADC_Test_02#': [970, 540],
                            'BOX_LNB_HEAS_MOCA_Test_02#': [1015, 540],
                            'BOX_LNB_HEAS_MOCA_Test_03#': [1055, 540],
                            'BOX_IFPCBA_72_EC_Testing_01#': [1095, 540],
                            'BOX_IFPCBA_73_E_Testing_01#': [1135, 540],
                            'BOX_LNB_3S_CSSATS_LBAND_2#': [120, 700],
                            'BOX_LNB_DTV_L-Band_6#': [220, 700],
                            'BOX_LNB_HEAS_GPADC_Test_01#': [330, 700],
                            'BOX_IFPCBA_73_E_Testing_02#': [370, 700],
                            'BOX_LNB_DTV_L-Band_4#': [415, 700],
                            'BOX_LNB_DTV_L-Band_8#': [460, 700],
                            'BOX_LNB_HWAS_GPADC_Test_01#': [505, 700],
                            'BOX_IFPCBA_72_EC_Testing_02#': [550, 700],
                            'BOX_LNB_HEAS_GPADC_Test_04#': [595, 700],
                            'BOX_LNB_HWAS_MOCA_Test_03#': [675, 700],
                            'BOX_Nokia_RFB_Test_1#': [740, 700],
                            'NXT5': [820, 675],
                            'NXT6': [890, 675],
                            'YS_L04_01': [20, 675],
                            'NXT2': [40, 675],
                            'NXT1': [60, 675],
                            'YS24_L2_02': [80, 675],
                            'YS_L2_03': [100, 675],
                            'NXTA': [120, 675],
                            'NXTB': [140, 675],
                            'XPFB1': [160, 675],
                            'NXTC': [180, 675],
                            'XPFC': [200, 675],
                            'NXTD': [220, 675],
                            'XPFD': [240, 675],
                            'YS_L03_01': [260, 675],
                            'YS_L03_02': [300, 675],
                            'YS_L03_03': [320, 675],
                            'YS_L04_02': [340, 675],
                            'YS_L04_03': [360, 675],
                            'NXT3': [380, 675],
                            'YV_L1_02': [400, 675],
                            'NXT4': [420, 675],
                            'YS_L1_03': [440, 675],
                            'XPFB2': [460, 675],
                        },
                        markPoint : {
                            symbolSize : 0,
                            data : [
                                {name:'BOX_LNB_DTV_L-Band_2#'},
                                {name:'BOX_LNB_HWAS_GPADC_Test_02#'},
                                {name:'BOX_LNB_HWAS_GPADC_Test_03#'},
                                {name:'BOX_LNB_HWAS_GPADC_Test_04#'},
                                {name:'BOX_LNB_HWAS_MOCA_Test_01#'},
                                {name:'BOX_LNB_DTV_L-Band_3#'},
                                {name:'BOX_LNB_HWAS_MOCA_Test_02#'},
                                {name:'BOX_74IFPCBA_Testing_Path_2#'},
                                {name:'BOX_74IFPCBA_Testing_Path_1#'},
                                {name:'BOX_LNB_DTV_L-Band_5#'},
                                {name:'BOX_74IFPCBA_Testing_Voltage_1#'},
                                {name:'BOX_LNB_3S_CSSATS_LBAND_1#'},
                                {name:'BOX_LNB_DTV_L-Band_1#'},
                                {name:'BOX_LNB_DTV_L-Band_7#'},
                                {name:'BOX_LNB_HEAS_GPADC_Test_03#'},
                                {name:'BOX_LNB_HEAS_MOCA_Test_01#'},
                                {name:'BOX_LNB_HEAS_GPADC_Test_02#'},
                                {name:'BOX_LNB_HEAS_MOCA_Test_02#'},
                                {name:'BOX_LNB_HEAS_MOCA_Test_03#'},
                                {name:'BOX_IFPCBA_72_EC_Testing_01#'},
                                {name:'BOX_IFPCBA_73_E_Testing_01#'},
                                {name:'BOX_LNB_3S_CSSATS_LBAND_2#'},
                                {name:'BOX_LNB_DTV_L-Band_6#'},
                                {name:'BOX_LNB_HEAS_GPADC_Test_01#'},
                                {name:'BOX_IFPCBA_73_E_Testing_02#'},
                                {name:'BOX_LNB_DTV_L-Band_4#'},
                                {name:'BOX_LNB_DTV_L-Band_8#'},
                                {name:'BOX_LNB_HWAS_GPADC_Test_01#'},
                                {name:'BOX_IFPCBA_72_EC_Testing_02#'},
                                {name:'BOX_LNB_HEAS_GPADC_Test_04#'},
                                {name:'BOX_LNB_HWAS_MOCA_Test_03#'},
                                {name:'BOX_Nokia_RFB_Test_1#'},
                                {name:'NXT5'},
                                {name:'NXT6'},
                                {name:'YS_L04_01'},  
                                {name:'NXT2'},  
                                {name:'NXT1'},  
                                {name:'YS24_L2_02'},  
                                {name:'YS_L2_03'},  
                                {name:'NXTA'},  
                                {name:'NXTB'},  
                                {name:'XPFB1'},  
                                {name:'NXTC'},  
                                {name:'XPFC'},  
                                {name:'NXTD'},  
                                {name:'XPFD'},  
                                {name:'YS_L03_01'},  
                                {name:'YS_L03_02'},  
                                {name:'YS_L03_03'},  
                                {name:'YS_L04_02'},  
                                {name:'YS_L04_03'},
                                {name:'NXT3'},
                                {name:'YV_L1_02'},
                                {name:'NXT4'},
                                {name:'YS_L1_03'},
                                {name:'XPFB2'},
                            ]
                        }
                     }
                ]
            };
            
            //为echarts对象加载数据
            myChart.setOption(option);
            
            //加载动画
            //myChart.showLoading();
            
            //根据抓取数据动态更新
             $.ajax({
                method: 'GET',
                url: 'demo1.jsp',
                success: function(result){
                    console.info(result);
                    if(result){
                        var jsonObj = $.parseJSON(result);
                        console.info(jsonObj);
                        var obj1 = [],
                        	obj2 = [],
                        	obj3 = [],
                        	obj4 = [];
                       	//console.info(jsonObj.data.length);
                       	//根据value状态重组json
                        for(var i = 0;i<jsonObj.data.length;i++){
                        	if (jsonObj.data[i].value == 0) {
                        		obj1.push(jsonObj.data[i]);
                        	}else if (jsonObj.data[i].value == 1) {
                        		obj2.push(jsonObj.data[i]);
                        	}else if (jsonObj.data[i].value == 2) {
                        		obj3.push(jsonObj.data[i]);
                        	}else{
                        		obj4.push(jsonObj.data[i]);
                        		//console.info(JSON.stringify(obj4));
                        	}
                        }
                       	
                        //根据重组的json动态刷新状态
                        myChart.setOption({
                            series:[
                             {
                            	//name: 'IDEL',
                                type: 'map',
                                mapType: 'demo1',
                                roam:true,
                                data: [],
                                /* markPoint: {
                                    //symbol: 'image://./img/1.png',
                                    symbol: 'circle',
                                    symbolSize : 10,
                                    //animation: true,
                                    itemStyle:{
                            			normal:{
                            				color: 'grey',
                            				//borderColor: 'grey',
                            				borderWidth: 1,
                            				label:{show:false}
                            			},
                            			//emphasis:{label:{show:true}}
                        			},
                                    effect: {
                                        show: true,
                                        color: 'grey'
                                    },
                                    data: obj1,
                                } */
                             },
                             {
                             	 //name: '运行',
                                 type: 'map',
                                 mapType: 'demo1',
                                 roam:true,
                                 data: [],
                                 /* markPoint: {
                                     symbol: 'circle',
                                     symbolSize : 10,
                                     itemStyle:{
                             			normal:{
                             				color: 'green',
                             				//borderColor: 'green',
                             				borderWidth: 1,
                             				label:{show:false}
                             			},
                             			//emphasis:{label:{show:true}}
                         			},
                                     effect: {
                                         show: true,
                                         color: 'green'
                                     },
                                     data: obj2,
                                 } */
                              },
                              {
                          		  //name: '报警'
                                  type: 'map',
                                  mapType: 'demo1',
                                  roam:true,
                                  data: [],
                                  /* markPoint: {
                                      symbol: 'circle',
                                      symbolSize : 10,
                                      itemStyle:{
                              			normal:{
                              				color: 'yellow',
                              				//borderColor: 'grey',
                              				borderWidth: 1,
                              				label:{show:false}
                              			},
                              			//emphasis:{label:{show:true}}
                          			  },
                                      effect: {
                                          show: true,
                                          color: 'yellow'
                                      },
                                      data: obj3,
                                  } */
                              },
                              {
                          		//name: '故障'
                                  type: 'map',
                                  mapType: 'demo1',
                                  roam:true,
                                  data: [],
                                  /* markPoint: {
                                      symbol: 'circle',
                                      symbolSize : 10,
                                      itemStyle:{
                              			normal:{
                              				color: '#FF0000',
                              				//borderColor: 'grey',
                              				borderWidth: 1,
                              				label:{show:false}
                              			},
                              			//emphasis:{label:{show:true}}
                          			  },
                                      effect: {
                                          show: true,
                                          color: '#FF0000'
                                      },
                                      data: obj4,
                                  } */
                              },
                             ]
                        });
                        
                        //加载markpoint
                        var idle = {
                            	//symbol: 'image://./img/1.png',
                            	symbol: 'circle',
                            	symbolSize : 6,
                            	//animation: true,
                            	itemStyle:{
                    				normal:{
                    					color: 'grey',
                    					//borderColor: 'grey',
                    					borderWidth: 1,
                    					label:{show:false}
                    				},
                    				//emphasis:{label:{show:true}}
                				},
                            	effect: {
                                	show: true,
                                	color: 'grey'
                            	},
                            	data: obj1,
                         };
                         var run = {
                        		 symbol: 'circle',
                                 symbolSize : 6,
                                 itemStyle:{
                         			normal:{
                         				color: 'green',
                         				//borderColor: 'green',
                         				borderWidth: 1,
                         				label:{show:false}
                         			},
                         			//emphasis:{label:{show:true}}
                     			},
                                 effect: {
                                     show: true,
                                     color: 'green'
                                 },
                                 data: obj2,
                         };
                         var alarm = {
                        		 symbol: 'circle',
                                 symbolSize : 6,
                                 itemStyle:{
                         			normal:{
                         				color: 'yellow',
                         				//borderColor: 'grey',
                         				borderWidth: 1,
                         				label:{show:false}
                         			},
                         			//emphasis:{label:{show:true}}
                     			  },
                                 effect: {
                                     show: true,
                                     color: 'yellow'
                                 },
                                 data: obj3,
                         };
                         var breakdown = {
                        		 symbol: 'circle',
                                 symbolSize : 6,
                                 itemStyle:{
                         			normal:{
                         				color: '#FF0000',
                         				//borderColor: 'grey',
                         				borderWidth: 1,
                         				label:{show:false}
                         			},
                         			//emphasis:{label:{show:true}}
                     			  },
                                 effect: {
                                     show: true,
                                     color: '#FF0000'
                                 },
                                 data: obj4,
                        		 
                         };
                        
                        //加载动画
                        myChart.showLoading();
                        myChart.addMarkPoint(0,idle);
                        myChart.addMarkPoint(1,run);
                        myChart.addMarkPoint(2,alarm);
                        myChart.addMarkPoint(3,breakdown);
                        
                        //结束加载
                        myChart.hideLoading();
                    }
                }
            });
        }
    );
</script>
</body>
</html>
